<template>
  <q-layout view="hHh LpR lFf">
    <a头 />
    <a侧栏 />
    <q-page-container>
      <router-view v-slot="{ Component, route }">
        <!-- <transition mode="out-in" name="el-fade-in-linear"> -->
          <keep-alive>
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
        <!-- </transition> -->
      </router-view>
      <q-page-sticky position="bottom-right" :offset="fabPos" class="z-10">
        <q-page-scroller :scroll-offset="150" :offset="[200, 10]">
          <q-btn dense glossy rounded icon="keyboard_arrow_up" v-touch-pan.prevent.mouse="moveFab" color="orange" />
        </q-page-scroller>
      </q-page-sticky>

    </q-page-container>
  </q-layout>
</template>

<script setup>
import a侧栏 from "./components/a侧栏/a侧栏.vue";
import a头 from "./components/a头/a头.vue";
import tabs from "./components/tabs/index.vue";
import { ref, onMounted, nextTick, reactive, watchEffect, watch } from "vue";
const topMenuChildren = ref({});

const fabPos = ref([3, 80]);
const moveFab = (ev) => {
  fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y]
}

</script>

<style lang="scss"></style>
